<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
    <el-tab-pane label="Home" name="home" />
    <el-tab-pane label="Count" name="count" />
    <el-tab-pane label="Scroll" name="scroll" />
    <el-tab-pane label="Tree" name="tree" />
  </el-tabs>
  <router-view />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

let activeName = ref('first')

const handleClick = val => {
  router.push(`/${val}`)
}

onMounted(() => {
  if (window.location.pathname === '/') {
    activeName.value = 'home'
  } else {
    activeName.value = window.location.pathname.slice(1)
  }
})
</script>

<style scoped></style>
